import {
  LikeFilled,
  LikeOutlined,
  DislikeFilled,
  DislikeOutlined,
  CommentOutlined,
} from '@ant-design/icons';
import { Space, Tooltip } from 'antd';
import { createElement } from 'react';

interface CommentActionsProps {
  comment: CommentType;
  onLike?: (comment: CommentType, type: TLikes) => void;
  onComment?: (comment: CommentType) => void;
}

const CommentActions: React.FC<CommentActionsProps> = ({
  comment,
  onLike,
  onComment,
}) => {
  return (
    <>
      <Space>
        <Tooltip title="点赞">
          <span onClick={() => onLike && onLike(comment, 'like')}>
            {createElement(comment.status === 0 ? LikeFilled : LikeOutlined)}
            <span className="comment-action"> {comment.likeNum}</span>
          </span>
        </Tooltip>
        <Tooltip title="点踩">
          <span onClick={() => onLike && onLike(comment, 'dislike')}>
            {createElement(
              comment.status === 1 ? DislikeFilled : DislikeOutlined,
            )}
            <span className="comment-action"> {comment.dislikeNum}</span>
          </span>
        </Tooltip>
        <Tooltip title="评论">
          <CommentOutlined onClick={() => onComment && onComment(comment)} />
          <span> {comment.children?.length ?? 0}</span>
        </Tooltip>
      </Space>
    </>
  );
};
export default CommentActions;
